<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>

    <!-- 新增：事件绑定按钮 -->
    <button @click="tapHandle">点我啊</button>

    <!-- 数据绑定示例 -->
    <view>
      <!-- 数据绑定-插值表达式渲染基本数据 -->
      <view>{{ msg }}</view>
      <!-- 数据绑定-插值表达式中使用三元运算 -->
      <view>{{ flag ? '我是真的' : '我是假的' }}</view>
      <!-- 数据绑定-基本运算 -->
      <view>{{ 1 + 1 }}</view>

      <!-- v-bind 动态绑定属性 -->
      <image v-bind:src="img"></image>
      <image :src="img"></image>

      <!-- v-for 的使用 -->
      <view v-for="(item, i) in arr" :key="i">
        名字：{{ item.name }}----年龄：{{ item.age }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  onError: function () {
    console.log('App Error')
  },
  data() {
    return {
      title: 'Hello',
      // 数据绑定相关数据
      msg: 'hello-uni',
      flag: true,
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg',
      arr: [
        { name: '刘能', age: 29 },
        { name: '赵四', age: 39 },
        { name: '宋小宝', age: 49 },
        { name: '小沈阳', age: 59 }
      ]
    }
  },
  onLoad() {

  },
  methods: {
    // 新增：事件处理函数
    tapHandle() {
      console.log('真的点我了')
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.home {
  swiper {
    width: 750rpx;
    height: 380rpx;
    image {
      height: 100%;
      width: 100%;
    }
  }
  .nav {
    display: flex;
    .nav_item {
      width: 25%;
      text-align: center;
      view {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
}
</style>